<template>
	<div class="donatorDetail">
		<div class="breadcrumb">
			<el-breadcrumb separator=">">
			  	<el-breadcrumb-item :to="{ path: '/kidney' }">肾源配型</el-breadcrumb-item>
		  	<el-breadcrumb-item>供体详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="donatorDetail-wrap">
			<right-header :header-name="headerName"></right-header>
	        <el-form :inline="true" label-position="right" label-width="80px" :model="donatorForm" ref="donatorForm">
		        <div class="base-infor four">
		        	<div class="title">基本信息</div>
			        <div class="main">
			        	<div class="main-item">
			        		<div class="item">
						  		<div class="lable smallLabel">移植编号</div>
						  		<span class="text">SZ0007</span>
						  	</div>
			        	</div>
					  	<div class="main-item">
					  		<el-form-item label="肾脏长" label-width="90px" prop="long" >
					    		<el-input type="text" v-model="donatorForm.long" auto-complete="off" class="input"></el-input><span class="unit">cm</span>
						  	</el-form-item>
						  	<el-form-item label="肾脏宽" label-width="90px" prop="width">
						    	<el-input type="text" v-model="donatorForm.width" auto-complete="off" class="input"></el-input><span class="unit">cm</span>
						  	</el-form-item>
						  	<el-form-item label="肾脏高" label-width="90px" prop="height">
						    	<el-input type="text" v-model="donatorForm.heightK" auto-complete="off" class="input"></el-input><span class="unit">cm</span>
						  	</el-form-item>
						  	<el-form-item label="失血时间" label-width="90px" prop="time">
						    	<el-input type="text" v-model="donatorForm.time" auto-complete="off" class="input"></el-input><span class="unit">分</span>
						  	</el-form-item>
					  	</div>
					</div>
				</div>  
				<div class="base-infor three">
					<div class="title">供体患者信息</div>
			        <div class="main">
			        	<div class="main-item">
			        		<el-form-item label="血型" prop="blood" >
					    		<el-select v-model="donatorForm.blood" class="select">
							      	<el-option label="A" value="A"></el-option>
							      	<el-option label="B" value="B"></el-option>
							      	<el-option label="AB" value="AB"></el-option>
							      	<el-option label="O" value="O"></el-option>
							    </el-select>
						  	</el-form-item>
						  	<el-form-item label="死亡原因" prop="deadReason">
						    	<el-select v-model="donatorForm.deadReason" class="select">
							      	<el-option label="脑死亡" value="A"></el-option>
							      	<el-option label="心脏死亡" value="B"></el-option>
							      	<el-option label="心脑死亡" value="AB"></el-option>
							      	<el-option label="其他" value="O"></el-option>
							    </el-select>
						  	</el-form-item>
			        	</div>
					  	<div class="main-item">
			        		<el-form-item label="年龄" prop="age" >
					    		<el-input type="text" v-model="donatorForm.age" auto-complete="off" class="input"></el-input><span class="unit">岁</span>
						  	</el-form-item>
						  	<el-form-item label="身高" prop="height">
						    	<el-input type="text" v-model="donatorForm.height" auto-complete="off" class="input"></el-input><span class="unit">cm</span>
						  	</el-form-item>
						  	<el-form-item label="体重" prop="weight">
						    	<el-input type="text" v-model="donatorForm.weight" auto-complete="off" class="input"></el-input><span class="unit">kg</span>
						  	</el-form-item>
			        	</div>
			        	<div class="main-item">
			        		<el-form-item label="HLA-A" prop="HLAA1" >
					    		<el-input type="text" v-model="donatorForm.HLAA1" auto-complete="off" class="input"></el-input>
					    		<el-input type="text" v-model="donatorForm.HLAA2" auto-complete="off" class="input"></el-input>
						  	</el-form-item>
						  	<el-form-item label="HLA-B" prop="HLAB1" >
					    		<el-input type="text" v-model="donatorForm.HLAB1" auto-complete="off" class="input"></el-input>
					    		<el-input type="text" v-model="donatorForm.HLAB2" auto-complete="off" class="input"></el-input>
						  	</el-form-item>
						  	<el-form-item label="HLA-DR" prop="HLADR1" >
					    		<el-input type="text" v-model="donatorForm.HLADR1" auto-complete="off" class="input"></el-input>
					    		<el-input type="text" v-model="donatorForm.HLADR2" auto-complete="off" class="input"></el-input>
						  	</el-form-item>
			        	</div>
			        	<div class="clearfix">
			        		<div class="bigLable">术前四项</div>
				        	<div class="bigItem">
				        		<div>
				        			<el-form-item label-width="150px" label="乙肝表面抗原" prop="A" >
							    		<el-select v-model="donatorForm.A" class="select">
									      	<el-option label="阴性" value="A"></el-option>
									      	<el-option label="阳性" value="B"></el-option>
									    </el-select>
								  	</el-form-item>
								  	<el-form-item label-width="150px" label="丙型肝炎抗体" prop="B">
							    		<el-select v-model="donatorForm.B" class="select">
									      	<el-option label="阴性" value="A"></el-option>
									      	<el-option label="阳性" value="B"></el-option>
									    </el-select>
							    	</el-form-item>
				        		</div>
				        		<div>
								  	<el-form-item label-width="150px" label="人免疫缺陷病毒抗体" prop="C" >
							    		<el-select v-model="donatorForm.C" class="select">
									      	<el-option label="阴性" value="A"></el-option>
									      	<el-option label="阳性" value="B"></el-option>
									    </el-select>
								  	</el-form-item>
								  	<el-form-item label-width="150px" label="梅毒螺旋体抗体" prop="D">
							    		<el-select v-model="donatorForm.D" class="select">
									      	<el-option label="阴性" value="A"></el-option>
									      	<el-option label="阳性" value="B"></el-option>
									    </el-select>
								  	</el-form-item>
					        	</div>
				        	</div>
					    </div>
					</div> 
				</div> 		
			</el-form>
			<div class="btn-wrap">
	            <el-button type="primary" @click="submitForm('donatorForm')">保存</el-button>
	        </div>
		</div>
		
    	
	</div>
</template>

<style lang='scss' rel='stylesheet/scss' scoped>
	.donatorDetail{
		.donatorDetail-wrap{
			padding:0 20px;	
			.four{
				.el-form-item{
					width: 200px;
				}
			}
			.three{
				.el-form-item{
					width: 250px;
				}
			}
			.input{
				width: 80px;
			}
			.select{
				width: 120px;
			}
			.smallLabel{
				width: 90px;
			}
			.bigLable{
				width: 100px;
				float: left;
				padding: 11px; 
			}
			.bigItem{
				float: left;
				.el-form-item{
					width: 350px;
				}
			}
			.btn-wrap{
				margin-top: 20px;
			}
		}
	}
</style>

<script>
	import rightHeader from '@/components/rightHeader'
	export default {
		data() {
			return {
				headerName: '肾源配型',
				donatorForm: {
					heightK:'',
					width:'',
					long:'',
					height:'',
					time:'',
					blood:'',
					deadReason:'',
					age:'',
					height:'',
					weight:'',

				}
			}
		},
		computed: {
				
		},
		methods: {
			
		},
		components: {
			'right-header': rightHeader
		},
		created(){
			
		}
	}
</script>
